From f3c704b82e6d480ac0de0aed7ad648d71ebaaaab Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Fri, 30 Nov 2018 20:53:13 +0100 Subject: [PATCH] Adwaita: updated switch control - might be nasty to hide labels with CSS. We can fix properly later. - the blue border seesm aliased when :checked --- gtk/theme/Adwaita/_common.scss | 11 +++++++---- gtk/theme/Adwaita/gtk-contained-dark.css | 4 ++-- gtk/theme/Adwaita/gtk-contained.css | 4 ++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index efe76e8ed7..b918f9cd34 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2647,10 +2647,11 @@ switch { // similar to the .scale border: 1px solid $borders_color; - border-radius: 3px; + border-radius: 14px; color: $fg_color; background-color: $dark_fill; text-shadow: 0 1px transparentize(black, 0.9); + font-size: 0; /*FIXME: quick workaround for the labels*/ &:checked { color: $selected_fg_color; @@ -2690,11 +2691,12 @@ switch { slider { margin: -1px; - min-width: 44px; - min-height: 26px; + min-width: 24px; + min-height: 24px; border: 1px solid; - border-radius: 3px; + border-radius: 50%; transition: $button_transition; + -gtk-outline-radius: 20px; @include button(normal-alt, $edge: $shadow_color); } @@ -2730,6 +2732,7 @@ switch { slider { &:checked, & { border-color: $selected_borders_color; } } } } + } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 508f0f3293..2747751143 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1075,7 +1075,7 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym treeview ~ scrollbar.vertical { border-top: 1px solid #252526; margin-top: -1px; } /********** Switch * */ -switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #252526; border-radius: 3px; color: #eeeeec; background-color: #323233; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } +switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #252526; border-radius: 14px; color: #eeeeec; background-color: #323233; text-shadow: 0 1px rgba(0, 0, 0, 0.1); font-size: 0; /*quick woraround for the labels*/ } switch:checked { color: #ffffff; border-color: #092444; background-color: #15539e; text-shadow: 0 1px rgba(9, 36, 68, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); } @@ -1087,7 +1087,7 @@ switch:backdrop:checked { border-color: #092444; background-color: #15539e; } switch:backdrop:disabled { color: #656466; border-color: #2a2a2b; background-color: #353338; } -switch slider { margin: -1px; min-width: 44px; min-height: 26px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #353435, inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1); } +switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #353435, inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1); } switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #373738, inset 0 -1px #302f30, 0 1px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom, #3f3e40 20%, #353435 90%); } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 87b664eddb..34a4fa84ac 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1083,7 +1083,7 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym treeview ~ scrollbar.vertical { border-top: 1px solid #cdc7c2; margin-top: -1px; } /********** Switch * */ -switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; border-radius: 3px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); } +switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; border-radius: 14px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); font-size: 0; /*quick woraround for the labels*/ } switch:checked { color: #ffffff; border-color: #0f3b71; background-color: #3584e4; text-shadow: 0 1px rgba(15, 59, 113, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); } @@ -1095,7 +1095,7 @@ switch:backdrop:checked { color: #f6f5f4; border-color: #3584e4; background-colo switch:backdrop:disabled { color: #d4cfca; border-color: #d5d0cc; background-color: #faf9f8; } -switch slider { margin: -1px; min-width: 44px; min-height: 26px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1); } +switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1); } switch:hover slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #dfdcd8, 0 1px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom, white 10%, white 90%); } -- 2.30.2